<template>
  <div class="dashboard-container">
    <div>
      总充值： {{ totalRecharge }} <br/>
      总充值： {{ totalWithdraw }}
    </div>
    <div id="main" style="width: 600px; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {getUvList} from '@/api/system'
// eslint-disable-next-line no-unused-vars
import {getTotalWithdraw, getTotalRecharge} from '@/api/user'

export default {
  data() {
    return {
      uvList: [],
      totalRecharge: 0,
      totalWithdraw: 0,
    }
  },
  mounted() {
    this.charts()
  },
  created() {
    this.fetchData()
  },
  methods: {
    charts() {
      getUvList().then(res => {
        this.uvList = res.data
        const accessCountList = this.uvList.map(uv => uv.accessCount);
        const timeList = this.uvList.map(uv => uv.statDate);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 绘制图表
        myChart.setOption({
          title: {
            text: 'UV 统计'
          },
          tooltip: {},
          xAxis: {
            data: timeList
          },
          yAxis: {},
          series: [
            {
              name: 'uv 数',
              type: 'bar',
              data: accessCountList
            }
          ]
        })
      })
    },
    fetchData() {
      getTotalRecharge().then(response => {
        this.totalRecharge = response.data.totalRecharge
        this.totalWithdraw = response.data.totalWithdraw
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
